<template>
	<div>
		<el-container class="wrap">
			<el-header class="header">
				<el-row>
					<el-col :span="20" class="title">疗养中心</el-col>
					<el-col :span="4">
						<el-dropdown @command="handleCommand">
							<span class="el-dropdown-link">{{username}}</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="Personal">个人设置</el-dropdown-item>
								<el-dropdown-item command="Logout" @click="Logout()">退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-col>
				</el-row>
			</el-header>
			<el-container>
				<el-aside width="260px" class="aside">
					<div class="menu">
						<Menu></Menu>
					</div>
				</el-aside>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>

		</el-container>

	</div>
</template>

<script>
	import Menu from '@/views/menu'
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "Home",
		data() {
			return {
				username:""
			}
		},
		components: {
			Menu

		},
		methods: {
			...mapMutations(['setToken']),
			logout() {
				this.axios.setToken(null)
				this.setToken(null)
				this.$router.push({
					path: '/login'
				})
			//清空服务器端的登录状态
			},
			handleCommand(command) {
				//this.$message('click on item ' + command);
				if (command === 'Logout') {
					this.logout();
				}
			}
		},
		created() {
			this.axios.get('/account/getUsername', res => {
				this.username = res.obj
			})
		}
	}
</script>

<style scoped>
	body {
		margin: 0px;
		padding: 0px;
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #fff;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
	.title{
		font-size: 16px;
		font-weight: 500;
		text-align: left;
	}


	.wrap {
		height: 100vh;
	}

	.header {
		border-bottom: 1px solid #919191;
		line-height: 60px;
		font-size: 1.2rem;
		font-weight: bold;
		background-color: #71ABD3;
		color: #fff;
	}


	.aside {
		border-right: solid 1px black;
		background-color: white;
		color: black;
	}

	.menu {
		overflow: auto;
		height: 700px;
	}
</style>
